import React from "react";

interface TopBarProps {
    nickname: string;
    userId: NicknameData['userId'];
    leave: (e?: React.MouseEvent) => void;
}

function TopBar(props: TopBarProps) {
    const { userId, nickname, leave } = props;
    return (
        <div className="row align-items-center justify-content-between bg-primary text-white pt-2 pb-2 mb-3" id="topBar">
            <div className="col-2 text-left">
                <button className="btn btn-outline-light"
                    type="button" data-toggle="collapse"
                    data-target="#collapseUserList" aria-expanded="false"
                    aria-controls="collapseUserList"
                >
                    <i className="iconfont">&#xe60f;</i>
                </button>
            </div>  
            <div className="col-7 justify-content-center row">
                <span className="pr-2">欢迎！
                    <span className="text-danger">{nickname}</span>
                </span>
                <span className="pl-2">ID: {userId}</span>
            </div>
            <div className="col-3 text-right">
                <button onClick={leave} className="btn btn-outline-warning">
                    rename
                </button>
            </div>
        </div>
    );
}

export default TopBar;